<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../../../myCss/flex.css" />
		<style>
			body {
				background-color: #FFFFFF;
			}
			
			.mui-bar {
				box-shadow: none;
			}
			
			.level {
				background-color: #FFFFFF;
				overflow: hidden;
				height: 50px;
				line-height: 50px;
				border-right: 1px solid #efefef;
				width: 33.3333333%;
			}
			
			.level-select {
				position: fixed;
				border-bottom: 1px solid #EFEFEF;
				text-align: center;
				width: 100%;
			}
			
			.level:last-child {
				border: none;
			}
			
			.level:active {
				opacity: 0.5;
			}
			
			.articleContent {
				width: 100%;
				height: 200px;
				display: flex;
				background-image: url(../../images/GL.jpg);
				align-items: flex-end;
				border-bottom: 1px solid #EFEFEF;
			}
			
			/*.articleContent1 {
				margin-top: 50px;
				background-color: aquamarine;
			}*/
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">攻略</h1>
		</header>
		<div class="mui-content" style="background-color: #FFFFFF;">
			<!--<div class="flex-row level-select">
				<div class="level">初级</div>
				<div class="level">中级</div>
				<div class="level">高级</div>
			</div>-->
			<div id="articleContent" class="articleContent articleContent1">
				<div style="margin-left: 1em;margin-bottom: 0.3em;color: #FFFFFF;font-weight: bold;">海钓技巧有哪些</div>
			</div>
		</div>
		<script src="../../../js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init();
			document.getElementById("articleContent").addEventListener("tap", function() {
				mui.openWindow({
					url: "articleContent.html",
					id: "articleContent"
				})
			});
		</script>
	</body>

</html>